<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正在加载</title>
		<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
		<script src="tian.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script>
			var i = 0;
			/*add——创建tbx下的div加文字和变宽度的方法*/

			function add(i) {

				var tbox = $(".tbox");

				var tiao = $(".tiao");
				tiao.css("width", i + "%").html(i + "%");

			}



			/*创建方法（i++循环起来）*/

			function xh() {

				if (i > 100) {
					$(".ok").html("加载完成").fadeIn("slow");
					$(window.parent.document).find("#loadingjiazai").remove();
					return;
				}

				if (i <= 100) {
					setTimeout("xh()", 5)

					add(i);

					i++;



				}



			}

			/*调用xh()函数*/

			$(document).ready(function() {

				xh();
				
			})

		</script>
		<style>
			.box {
				width: 397px;
				    height: 90px;
				    margin: 0 auto;
				    position: absolute;
				    left: calc(50% - 200px);
				    top: calc(50% - 45px);
					z-index: 9999999999999999;
			}

			.ok {
				width: 200px;
				height: 100px;
				margin: 0 auto;
				text-align: center;
				background: #999;
				line-height: 100px;
				color: #FFF;
				display: none;
			}

			.tbox {
				width: 397px;
				height: 49px;
				background: url(bak.png) no-repeat;
				margin-top: 20px;
			}

			.tbox div {
				width: 0px;
				height: 49px;
				background: #999999;
				text-align: center;
				border-radius: 7px;
				font-family: Tahoma;
				font-size: 18px;
				line-height: 48px;
			}
			
		  
		</style>
		<div class="box">
			<div class="ok"></div>
			<div class="tbox">
				<div class="tiao"></div>
			</div>
		</div>
	</body>
</html>
